<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .slider-bar {
            position: absolute;
            cursor: pointer;
            right: 0;
            top: 650px;
            width: 45px;
            /* height: 200px; */
            background-color: orange;
            z-index: 32;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
            text-align: center;
            font-size: 30px;
            color: #fff;
        }
        
        .header {
            height: 150px;
            background-color: orangered;
        }
        
        .banner {
            height: 450px;
            background-color: lightblue;
        }
        
        .main {
            /* height: 1000px; */
            background-color: yellowgreen;
        }
        
        .slider-bar div {
            text-align: center;
            padding: 5px 0;
            color: #fff;
        }
        
        .slider-bar .active {
            background-color: orangered;
        }
        
        .goods {
            height: 600px;
            background-color: pink;
        }
        
        .zhibo {
            height: 600px;
            background-color: lightcoral;
        }
        
        .like {
            height: 600px;
            background-color: indigo;
        }
        
        .back-top {
            display: none;
        }
        
        .footer {
            height: 400px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- <script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script> -->
    

     <!-- 仿造淘宝侧边导航栏案例 -->

     <div class="slider-bar">
        <div data-index="goods" class="slider-bar-item">品质好货</div>
        <div data-index="zhibo" class="slider-bar-item">好店直播</div>
        <div data-index="like" class="slider-bar-item">猜你喜欢</div>
        <div class="back-top">返回顶部</div>
    </div>

     <div class="box">
         <div class="box-content">
    
            <div class="header w">Header 头部</div>
            <div class="banner w">Banner 轮播区域</div>
            <div class="main w">Main 主体部分
                <div class="goods" id="goods">品质好货</div>
                <div class="zhibo" id="zhibo">好店直播</div>
                <div class="like" id="like">猜你喜欢</div>
            </div>
            <div class="footer w">
                我是底部
            </div>
         </div>
     </div>

<script src="./js/better-scroll.js"></script>
<script>
    var bs = BetterScroll.createBScroll(".box",{
        
    })

    var box = document.querySelector(".box")
    var bar = document.querySelector(".slider-bar");
    var main = document.querySelector(".main");
    var goods = document.querySelector(".goods");
    var zhibo = document.querySelector(".zhibo");
    var like = document.querySelector(".like");
    var header = document.querySelector(".header");
    var morebar = bar.children;
    var arr = [goods,zhibo,like,header];
    // offsetHeight 属性是一个只读属性，它返回该元素的像素高度，
    // 高度包含内边距（padding）和边框（border），不包含外边距（margin），是一个整数，单位是像素 px。
    // var mainHeight = main.offsetHeight;

    // 滚动结束触发scrollEnd事件
    bs.on("scrollEnd",function(e){
        // e.y是滑动的距离，y的偏移量,也是负值
        // main.offsetTop距离上面的距离，包括卷去的距离
        if(e.y < -main.offsetTop){
            console.log("到了");
            bar.style.top = "40px";
            bar.style.right = "0px";
            bar.children[3].classList.remove("back-top");

            // 如果滑动的距离小于mian距离顶部的位置，
        }else if(e.y > -main.offsetTop){
            // 让侧边栏距离顶部650px
            bar.style.top = "650px";
            // 让返回顶部看不见
            morebar[3].classList.add("back-top");

            for(var i = 0;i < morebar.length;i++){
                // 让它们全部移除红色的背景，
                // 可是我不写这个也是没有红色的啊？,让后面点击的红色消失，运行一下代码就明白了
                // morebar[i].classList.remove("active");
            }
        }

        // 为什么减一呢？
        // 是因为不需要把返回顶部设置为红色
        for(var i = 0;i < arr.length - 1;i++){
            if(e.y < -arr[i].offsetTop){
                check(i);
            }
        }
    })

    

        // 排他
        function check(index){
            for(var i = 0; i < morebar.length;i++){
                // 把它们所有的红色都移除
                morebar[i].classList.remove("active");
            }
            // 给当前的侧边栏小框加上红色
            morebar[index].classList.add("active");
        }


        // 点击跳转
        for(var i = 0;i<morebar.length;i++){
            (function(i){
                morebar[i].addEventListener("click",function(){
                    bs.scrollToElement(arr[i],300);
                })
            })(i)
        }
</script>
</body>
</html>